Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

CSS height and max-height

In CSS, the height and max-height properties are used to control the height of an element. Here's how they work:

1. `height`

This property sets the height of an element. It can be defined using various units like pixels (px), percentages (%), ems (em), viewport height (vh), and more:

css

.element {
    height: 200px;   /* Sets height in pixels */
    height: 50%;     /* Sets height as a percentage of the containing element */
    height: 10em;    /* Sets height in ems (relative to the font-size of the element) */
    height: 50vh;    /* Sets height as a percentage of the viewport height */
}

2. `max-height`

This property sets the maximum height of an element. If the content exceeds this height, it will be clipped (depending on the overflow property) or scrollable (if overflow: scroll is set). It can also be defined using various units:

css

.element {
    max-height: 400px;   /* Sets maximum height in pixels */
    max-height: 80%;     /* Sets maximum height as a percentage of the containing element */
    max-height: 20em;    /* Sets maximum height in ems */
    max-height: 60vh;    /* Sets maximum height as a percentage of the viewport height */
}

Example

Here is an example that uses both height and max-height:

css

.element {
    height: 200px;      /* Sets height */
    max-height: 400px;  /* Sets maximum height */
    overflow: auto;     /* Adds scrollbars if content exceeds max-height */
}

By using these properties, you can have greater control over the size and behavior of your elements. Let me know if you need more details or examples!

Coding Schools

CSS height and max-height

1. height

2. max-height

Example

1. `height`

2. `max-height`